<template>
    <div>
      <h3>管理员登录</h3>
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td >帐号</td>
            <td><input type="text" v-model="queryInfo.userName" /></td>
          </tr>
          <tr>
            <td >密码</td>
            <td><input type="password" v-model="queryInfo.userPwd" /></td>
          </tr>
          <tr>
            <td ></td>
            <td>
              <input
                type="button"
                value="登陆"
                class="btn btn-success"
                @click="login"
              />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive } from 'vue';
  //1.安装 npm i axios  2.导入  作用:专门是用来发送网络请求的 相当于$.ajax({})
  import axios from 'axios';
  //vue-router:作用实现页面跳转
  import { useRouter } from 'vue-router';
  //router 作用：可以实现页面跳转并且传递参数
  const router = useRouter();
  
  //数据
  let queryInfo = reactive({
    userName: '',
    userPwd: '',
  });
  
  //登陆
  const login = () => {
    //1.非空验证+有效性验证
    if (queryInfo.userName == '') {
      alert('帐号不能为空');
      return;
    }
  
    if (queryInfo.userPwd == '') {
      alert('密码不能为空');
      return;
    }
    //2.发送网络请求  使用
    axios({
      url: '/api/Admins/Login', //向后端发送网络请求的地址
      method: 'get', //请求方式
      params: {
        userName: queryInfo.userName,
        userPwd: queryInfo.userPwd,
      },
    })
      .then((res) => {
        //res 表示请求的结果
        console.log(res);
        if (res.data == -1) {
          alert('帐号不存在或者错误');
          return;
        }
        if (res.data == -2) {
          alert('密码错误');
          return;
        }
        
        //登陆成功   1.存储用户信息  2.跳转到增加会员页面
        router.push('/memberList');
      })
      .catch((err) => {
        //err:表求失败的结果
        console.log(err);
      });
  };
  </script>
  
  <style scoped></style>
  